/*
 * CirclePlayer for the jPlayer Plugin (jQuery)
 * http://www.jplayer.org
 *
 * Copyright (c) 2009 - 2012 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Version: 1.0.1 (jPlayer 2.1.0+)
 * Date: 30th May 2011
 *
 * Author: Mark J Panaghiston @thepag
 *
 * CirclePlayer prototype developed by:
 * Mark Boas @maboa
 * Silvia Benvenuti @aulentina
 * Jussi Kalliokoski @quinirill
 *
 * Inspired by :
 * Neway @imneway http://imneway.net/ http://forrst.com/posts/Untitled-CPt
 * and
 * Liam McKay @liammckay http://dribbble.com/shots/50882-Purple-Play-Pause
 *
 * Standing on the shoulders of :
 * John Resig @jresig
 * Mark Panaghiston @thepag
 * Louis-Rémi Babé @Louis_Remi
 */

define(function (require, exports, module) {
	var $ = require('jquery');
	require('Effect/jPlayer/skin/circle.skin/circle.player.css');
	var jQuery = require('jquery');
	(function ($) {
		var CirclePlayer = function(jPlayerSelector, media, options) {
			var	self = this,

				defaults = {
					// solution: "flash, html", // For testing Flash with CSS3
					supplied: "m4a, oga",
					// Android 2.3 corrupts media element if preload:"none" is used.
					// preload: "none", // No point preloading metadata since no times are displayed. It helps keep the buffer state correct too.
					cssSelectorAncestor: "#cp_container_1",
					cssSelector: {
						play: ".cp-play",
						pause: ".cp-pause"
					}
				},

				cssSelector = {
					bufferHolder: ".cp-buffer-holder",
					buffer1: ".cp-buffer-1",
					buffer2: ".cp-buffer-2",
					progressHolder: ".cp-progress-holder",
					progress1: ".cp-progress-1",
					progress2: ".cp-progress-2",
					circleControl: ".cp-circle-control"
				};

			this.cssClass = {
				gt50: "cp-gt50",
				fallback: "cp-fallback"
			};

			this.spritePitch = 104;
			this.spriteRatio = 0.24; // Number of steps / 100

			this.player = $(jPlayerSelector);
			this.media = $.extend({}, media);
			this.options = $.extend(true, {}, defaults, options); // Deep copy

			this.cssTransforms = Modernizr.csstransforms;
			this.audio = {};
			this.dragging = false; // Indicates if the progressbar is being 'dragged'.

			this.eventNamespace = ".CirclePlayer"; // So the events can easily be removed in destroy.

			this.jq = {};
			$.each(cssSelector, function(entity, cssSel) {
				self.jq[entity] = $(self.options.cssSelectorAncestor + " " + cssSel);
			});

			this._initSolution();
			this._initPlayer();
		};

		CirclePlayer.prototype = {
			_createHtml: function() {
			},
			_initPlayer: function() {
				var self = this;
				this.player.jPlayer(this.options);

				this.player.bind($.jPlayer.event.ready + this.eventNamespace, function(event) {
					if(event.jPlayer.html.used && event.jPlayer.html.audio.available) {
						self.audio = $(this).data("jPlayer").htmlElement.audio;
					}
					$(this).jPlayer("setMedia", self.media);
					self._initCircleControl();
				});

				this.player.bind($.jPlayer.event.play + this.eventNamespace, function(event) {
					$(this).jPlayer("pauseOthers");
				});

				// This event fired as play time increments
				this.player.bind($.jPlayer.event.timeupdate + this.eventNamespace, function(event) {
					if (!self.dragging) {
						self._timeupdate(event.jPlayer.status.currentPercentAbsolute);
					}
				});

				// This event fired as buffered time increments
				this.player.bind($.jPlayer.event.progress + this.eventNamespace, function(event) {
					var percent = 0;
					if((typeof self.audio.buffered === "object") && (self.audio.buffered.length > 0)) {
						if(self.audio.duration > 0) {
							var bufferTime = 0;
							for(var i = 0; i < self.audio.buffered.length; i++) {
								bufferTime += self.audio.buffered.end(i) - self.audio.buffered.start(i);
								// console.log(i + " | start = " + self.audio.buffered.start(i) + " | end = " + self.audio.buffered.end(i) + " | bufferTime = " + bufferTime + " | duration = " + self.audio.duration);
							}
							percent = 100 * bufferTime / self.audio.duration;
						} // else the Metadata has not been read yet.
						// console.log("percent = " + percent);
					} else { // Fallback if buffered not supported
						// percent = event.jPlayer.status.seekPercent;
						percent = 0; // Cleans up the inital conditions on all browsers, since seekPercent defaults to 100 when object is undefined.
					}
					self._progress(percent); // Problem here at initial condition. Due to the Opera clause above of buffered.length > 0 above... Removing it means Opera's white buffer ring never shows like with polyfill.
					// Firefox 4 does not always give the final progress event when buffered = 100%
				});

				this.player.bind($.jPlayer.event.ended + this.eventNamespace, function(event) {
					self._resetSolution();
				});
			},
			_initSolution: function() {
				if (this.cssTransforms) {
					this.jq.progressHolder.show();
					this.jq.bufferHolder.show();
				}
				else {
					this.jq.progressHolder.addClass(this.cssClass.gt50).show();
					this.jq.progress1.addClass(this.cssClass.fallback);
					this.jq.progress2.hide();
					this.jq.bufferHolder.hide();
				}
				this._resetSolution();
			},
			_resetSolution: function() {
				if (this.cssTransforms) {
					this.jq.progressHolder.removeClass(this.cssClass.gt50);
					this.jq.progress1.css({'transform': 'rotate(0deg)'});
					this.jq.progress2.css({'transform': 'rotate(0deg)'}).hide();
				}
				else {
					this.jq.progress1.css('background-position', '0 ' + this.spritePitch + 'px');
				}
			},
			_initCircleControl: function() {
				var self = this;
				this.jq.circleControl.grab({
					onstart: function(){
						self.dragging = true;
					}, onmove: function(event){
						var pc = self._getArcPercent(event.position.x, event.position.y);
						self.player.jPlayer("playHead", pc).jPlayer("play");
						self._timeupdate(pc);
					}, onfinish: function(event){
						self.dragging = false;
						var pc = self._getArcPercent(event.position.x, event.position.y);
						self.player.jPlayer("playHead", pc).jPlayer("play");
					}
				});
			},
			_timeupdate: function(percent) {
				var degs = percent * 3.6+"deg";

				var spriteOffset = (Math.floor((Math.round(percent))*this.spriteRatio)-1)*-this.spritePitch;

				if (percent <= 50) {
					if (this.cssTransforms) {
						this.jq.progressHolder.removeClass(this.cssClass.gt50);
						this.jq.progress1.css({'transform': 'rotate(' + degs + ')'});
						this.jq.progress2.hide();
					} else { // fall back
						this.jq.progress1.css('background-position', '0 '+spriteOffset+'px');
					}
				} else if (percent <= 100) {
					if (this.cssTransforms) {
						this.jq.progressHolder.addClass(this.cssClass.gt50);
						this.jq.progress1.css({'transform': 'rotate(180deg)'});
						this.jq.progress2.css({'transform': 'rotate(' + degs + ')'});
						this.jq.progress2.show();
					} else { // fall back
						this.jq.progress1.css('background-position', '0 '+spriteOffset+'px');
					}
				}
			},
			_progress: function(percent) {
				var degs = percent * 3.6+"deg";

				if (this.cssTransforms) {
					if (percent <= 50) {
						this.jq.bufferHolder.removeClass(this.cssClass.gt50);
						this.jq.buffer1.css({'transform': 'rotate(' + degs + ')'});
						this.jq.buffer2.hide();
					} else if (percent <= 100) {
						this.jq.bufferHolder.addClass(this.cssClass.gt50);
						this.jq.buffer1.css({'transform': 'rotate(180deg)'});
						this.jq.buffer2.show();
						this.jq.buffer2.css({'transform': 'rotate(' + degs + ')'});
					}
				}
			},
			_getArcPercent: function(pageX, pageY) {
				var	offset	= this.jq.circleControl.offset(),
					x	= pageX - offset.left - this.jq.circleControl.width()/2,
					y	= pageY - offset.top - this.jq.circleControl.height()/2,
					theta	= Math.atan2(y,x);

				if (theta > -1 * Math.PI && theta < -0.5 * Math.PI) {
					theta = 2 * Math.PI + theta;
				}

				// theta is now value between -0.5PI and 1.5PI
				// ready to be normalized and applied

				return (theta + Math.PI / 2) / 2 * Math.PI * 10;
			},
			setMedia: function(media) {
				this.media = $.extend({}, media);
				this.player.jPlayer("setMedia", this.media);
			},
			play: function(time) {
				this.player.jPlayer("play", time);
			},
			pause: function(time) {
				this.player.jPlayer("pause", time);
			},
			destroy: function() {
				this.player.unbind(this.eventNamespace);
				this.player.jPlayer("destroy");
			}
		};
		$.extend($.fn, {
			jPlayerCircle :function(stream){
				var option = {
					cssSelectorAncestor: "#cp_container_1",
					swfPath: "js",
					wmode: "window",
					keyEnabled: true
				};
				new CirclePlayer(this, stream, option);
			}
		});
	}(jQuery));
	return jQuery;
});